import { useEffect, useState } from 'react'
import { Card, List, Space,Badge,Popover } from 'antd';
import { getNewCommentList } from '@/api/index'
export default function IndexPage() {
    const [data,setdata]:any = useState([])
    useEffect(()=>{
        getNewCommentList().then(res=>{
            setdata(res.data[0]);
            console.log(res.data[0]);
            
        })
    },[])
    return (
        <div style={{ padding: '20px' }}>
            <Card title='最新评论' extra={<><a style={{ color: '#000' }} href="comment">全部评论</a></>}>
                <List
                    dataSource={data}
                    renderItem={(item:any) => (
                        <List.Item key={item.id}>
                            <Space>
                                {item.name}在
                                <Popover title='页面预览' content={
                                    <div>
                                        <img src={item.url} alt="" />
                                    </div>
                                }>
                                    <a>文章</a>
                                </Popover>
                                评论
                                <Popover title='评论内容--原始内容' content={
                                    <p>{item.content}</p>
                                }>
                                    <a>查看内容</a>
                                </Popover>
                                {
                                    item.pass?<Space style={{ marginLeft: '20px' }}><Badge status="success" />通过</Space>:
                                    <Space style={{ marginLeft: '20px' }}><Badge status="warning" />未通过</Space>
                                }
                            </Space>
                            <Space>
                                <a href="">通过</a>
                                <a href="">拒绝</a>
                                <a href="">回复</a>
                                <a href="">删除</a>
                            </Space>
                        </List.Item>
                    )}
                />
            </Card>
        </div>
    );
}
